<template>
  <div id="app">
    <el-container>
      <el-header style="padding: 0;"><nav-Bar></nav-Bar></el-header>
      <el-main style="padding: 0;"><router-view /></el-main>
      <el-footer style="height:200px;padding: 0;"><afooter></afooter></el-footer>
    </el-container>
  </div>
</template>

<script>
import navBar from "./components/navBar/index.vue";
import afooter from "./components/footer/index.vue";

export default {
  components: {
    afooter,
    navBar
  },
};
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
  #app{
    background-color: #e1e1e1;
  }

  .el-main{
    @media screen and (max-width:979px) {
        width: 98%;
    }
    margin: 15px auto;
    width: 90%;
  }
  .el-footer{
    height: 220px;
    width: 100%;
  }
  a{
    color: #000;
    text-decoration: none;
  }
</style>
